<template>
    <div style="width: 100%;">
        <div style="margin: 20px;">
            <d-row>
                <d-col :span="8"/>
                <d-col :span="8">
                    <d-row class="docs-devui-row">
                        <d-search css-class="ipt" v-model="jobName"
                                  :max-length="20" placeholder="输入岗位名称"
                                  @search="searchJob"
                                  style="width: 200px"/>
                        <d-button variant="solid" size="lg"
                                  v-show="showDetail" @click="showDetail = false"
                                  style="margin-left: 10px"
                        >
                            <i class="icon-go-back"></i>
                            返回
                        </d-button>
                    </d-row>
                </d-col>
                <d-col :span="8"/>
            </d-row>

        </div>
        <div v-show="!showDetail">
            <d-table :data="jobTableData" :header-bg="true" size="md" @cell-click="queryJobDetail" v-loading="load">
                <d-column type="index" width="40"></d-column>
                <d-column field="company" header="公司"></d-column>
                <d-column field="job_name" header="岗位名称"></d-column>
                <d-column field="salary" header="薪水"></d-column>
                <d-column field="experience" header="工作经验"></d-column>
                <d-column field="companySize" header="公司规模"></d-column>
            </d-table>
        </div>
        <div>
            <d-row class="docs-devui-row">
                <d-col :span="7"/>
                <d-col :span="10">
                    <d-card v-show="showDetail" style=" text-align: center">
                        <template #avatar>
                            <d-avatar :name="jobInfo.company"></d-avatar>
                        </template>
                        <template #title>{{ jobInfo.company }}</template>
                        <template #content>
                            <p>城市：{{ jobInfo.city_name }}</p>
                            <p>公司规模：{{ jobInfo.company_size_lower_limit }} - {{ jobInfo.company_size_upper_limit }}人</p>
                            <p>薪资范围：{{ jobInfo.salary_lower_limit }} - {{ jobInfo.salary_upper_limit }}K</p>
                            <p>工作经验：{{ jobInfo.experience_lower_limit }} - {{ jobInfo.experience_upper_limit }}年</p>
                            <p>学历要求：{{ jobInfo.education_name_list[0] }}</p>
                            <p>职位：{{ jobInfo.job_name }}</p>
                        </template>
                    </d-card>
                </d-col>
                <d-col :span="7"/>
            </d-row>
        </div>
        <div style="position: absolute; bottom: 50px">
            <d-pagination
                size="lg"
                :total="total"
                v-model:pageSize="pageSize"
                v-model:pageIndex="page"
                :can-view-total="true"
                :can-change-page-size="true"
                :can-jump-page="true"
                :max-items="5"
                @page-index-change="queryJobTable"
                @page-size-change="queryJobTable"
            />
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "JobView",
    data() {
        return {
            load: false,
            page: 1,
            pageSize: 10,
            total: 100,
            jobTableData: [],
            jobName: '',
            showDetail: false,
            jobInfo: {
                city_name: '',
                company_size_lower_limit: '',
                company_size_upper_limit: '',
                salary_lower_limit: '',
                salary_upper_limit: '',
                experience_lower_limit: '',
                experience_upper_limit: '',
                education_name_list: [''],
                job_name: '',
                company: ''
            }
        }
    },
    methods: {
        updateJobTableData(tableData) {
            this.jobTableData = tableData.items.map(function (job) {
                return {
                    ...job,
                    salary: `${job.salary_lower_limit}-${job.salary_upper_limit}k`,
                    experience: `${job.experience_lower_limit}-${job.experience_upper_limit}年`,
                    companySize: `${job.company_size_lower_limit}-${job.company_size_upper_limit}人`
                }
            })
        },
        searchJob() {
            this.load = true;
            axios.post('http://152.136.191.171:9243/job/page/name', {
                name: this.jobName,
                page: this.page,
                pageSize: this.pageSize
            }).then(resp => {
                let tableData = resp.data.data;
                this.total = tableData.total;
                this.updateJobTableData(tableData);
                this.load = false;
            }).catch(resp => {
                this.load = false;
                this.page = 1;
                this.pageSize = 10;
                this.total = 0;
                this.jobTableData = [];
            })
        },
        queryJobTable() {
            this.load = true;
            axios.post('http://152.136.191.171:9243/job/page', {
                page: this.page,
                pageSize: this.pageSize
            }).then(resp => {
                let tableData = resp.data.data;
                this.total = tableData.total;
                this.updateJobTableData(tableData);
                this.load = false;
            })
        },
        queryJobDetail(item) {
            let jobId = item.row.job_id;
            axios.get(`http://152.136.191.171:9243/job/${jobId}`).then(resp => {
                this.jobInfo = resp.data.data;
                this.showDetail = true;
            })
        }
    },
    mounted() {
        this.queryJobTable()
    }
}
</script>

<style scoped>

</style>